<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td {
            width: 100px;
            background-color: darkgreen;
        }
    </style>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="test1">
    <!-- 直接写js片段 -->
    <button @click="num++">增加</button>
    <br>
    <!-- 用函数写减少 -->
    <button @click="decrement">减少</button>
    <h1>{{num}}</h1>
    <div @click="clickMe('div')" style="border: green 1px solid;width: 100px;height: 100px;">
        <button @click.stop="clickMe('btn')" @contextmenu.prevent="rightClick('哈哈哈')">点我试试</button>
    </div>
</div>


<script type="text/javascript">
    var test1 = new Vue({
        el: "#test1",
        data: {
            num: 0
        },
        methods:{
            decrement:function () {
                this.num--;
            },
            clickMe:function (val) {
                window.alert("23333" + val);
            },
            rightClick:function (val) {
                window.alert(val);
            }
        }
    });
</script>
<br>
<br>
<br>
<div id="test2">
    <table>
        <tr v-for="user in users">
            <td v-text="user.name"></td>
            <td v-text="user.age"></td>
            <td v-text="user.gender"></td>
        </tr>
    </table>
    <br>
    <table>
        <tr v-for="(user,index) in users">
            <td v-text="index+1"></td>
            <td v-html="user.name"></td>
            <td v-html="user.age"></td>
            <td v-html="user.gender"></td>
        </tr>
    </table>
    <br>
    <table>
        <tr v-for="(x,y) in users">
            <td v-text="x"></td>
            <td v-html="y"></td>
        </tr>

        <tr v-for="(x,y,z) in users">
            <td v-text="x"></td>
            <td v-html="y"></td>
            <td v-html="z"></td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    var test2=new Vue({
        el:"#test2",
        data:{
            users:[
                {name:'柳岩', gender:'女', age: 21},
                {name:'有哥', gender:'男', age: 30},
                {name:'范冰冰', gender:'女', age: 24},
                {name:'刘亦菲', gender:'女', age: 18},
                {name:'古力娜扎', gender:'女', age: 25}
            ]
        }
    })
</script>
</body>
</html>